<template>
	<div class="app_head">
		<el-header>
				<el-col :span="24" class="topbar-wrap header_bg" >
					<div class="topbar-logo topbar-btn">
						<a href="/">
							<img src="../../static/img/head_img/left_logins.png" height="50" width="280" >
						</a>
					</div>
					 <!--展开折叠开关-->
					<div class="topbar-title">
						 <div class="menu-toggle" @click.prevent="collapse">
							<i class="iconfont icon-menufold" v-show="!collapsed"></i>
							<i class="iconfont icon-menuunfold" v-show="collapsed"></i>
						</div>
						<span style="font-size: 18px;color: #fff;">微应用管理平台</span>
					</div>
					<div class="topbar-account topbar-btn">
					<!-- 警告信息 -->
						<!-- <el-dropdown trigger="click" class="news">
								<span class="el-dropdown-link">
								<el-badge :value="12" class="item">
									<img src="../../static/img/head_img/ling.png" height="25" width="25" alt="">
								</el-badge>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>消息11</el-dropdown-item>
									<el-dropdown-item>消息22</el-dropdown-item>
									<el-dropdown-item>消息33</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown> -->
							<!-- 用户登录信息 -->
						<el-dropdown trigger="click">
							<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i> {{nickname}}  <i
								class="iconfont icon-down"></i></span>
							<el-dropdown-menu slot="dropdown">
								<!--<el-dropdown-item>
									<router-link to="/user/profile"><span style="color: #555;font-size: 14px;">个人信息</span></router-link>
								</el-dropdown-item>
								<el-dropdown-item>
									<router-link :to="'/user/changepwd'"><span style="color: #555;font-size: 14px;">修改密码</span></router-link>
								</el-dropdown-item>-->
								<el-dropdown-item divided>
									<router-link :to="'/'"><span @click='logout' style="color: #555;font-size: 14px;">退出登录</span></router-link>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-col>
			</el-header>
	</div>
</template>
<script>
import bus from '../eventBus.js';
export default{
	name:'Headr',
	data(){
		return{
			nickname:'',
			collapsed:false,
			tokenKey:''
		}
	},
	methods:{
		//折叠导航栏
		collapse() {
			this.collapsed = !this.collapsed;
			bus.$emit("collaped",this.collapsed);
		},
		//退出登录
		logout() {
			this.$confirm('确认退出吗?', '提示', {
				type: 'warning'
			}).then(() => {
				 this.delCookie('userToken');
				
			}).catch(() => {

			});
		},
		delCookie (name){   
		    var exp = new Date();   
		    exp.setTime(exp.getTime() - 1);   
		    var cval= this.getCookie(name);   
		    if(cval!=null)   
		        document.cookie= name + "="+cval+"; path=/;expires="+exp.toGMTString();   
				 this.$router.push('/');
		},
		getCookie (name){
			var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
			if(arr=document.cookie.match(reg)){
				return unescape(arr[2]);
			}else{	
				return null;
			}
		},
//	弹窗提示	
      open() {
	        this.$message({
	          message: '恭喜你，这是一条成功消息',
	          type: 'success'
	        });
	      }		
	},
	mounted() {
		// 折叠导航栏
		var self=this;
			bus.$on("collaped",function (msg) {
				self.collapsed=msg;
			});
				// 获取用户
		let user = this.getCookie('userName');
			if (user) {
				user = JSON.parse(user);
				self.nickname = user;
				console.log('获取到的用户名：',user);
			}
		}
	}
</script>
<style>

</style>